import React, { Component } from 'react';
import { connect } from 'dva';
import { Table, Input, DatePicker, Button, Row, Col, Select, Form, Popconfirm, Popover, Modal } from 'antd';
import UpdateBuySiteModel from './UpdateBuySiteModel';

const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;

@window.regStateCache
class PurchaseBuySite extends Component {

  constructor() {
    super();
    this.state = {
    	modalVisible: false,
    	buySiteNameTemp: '',
    };
  }

  handleSubmit(e, page, pageSize) {
    const { currentPageSize } = this.props;
    if (e) e.preventDefault();
	  this.props.form.validateFieldsAndScroll((err, values) => {
	    if (err) return;
	    this.props.dispatch({
	      type: 'purchase/itemBuySite',
	      payload: {
	        ...values,
	        pageIndex: typeof page === 'number' ? page : 1,
	        pageSize: pageSize || currentPageSize,
	      },
	    });
	  });
  }
  updateBuySite(buySiteName) {
  	const p = this;
  	p.setState({
  	  modalVisible: true,
  	  buySiteNameTemp: buySiteName,
  	});
  }

	closeModal() {
	    this.setState({ modalVisible: false }, () => {
	    	let that = this;
	    	setTimeout(function(){
	    		that._refreshData();
	    	}, 1000);
	    });
	  }

  render() {
    const p = this;
    const { form, itemBuySiteList = [], currentPage, currentPageSize, itemBuySiteTotal, dispatch } = p.props;
    const { getFieldDecorator,resetFields } = form;
    const { modalVisible } = p.state;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    const columnsList = [
      { title: '采购站点', dataIndex: 'buySite', key: 'buySite', width: 130 },
      { title: '操作', 
      	dataIndex: 'operator', 
      	key: 'operator', 
      	width: 130,
      	render(t,r){
      		return(
      			<div>
              <a href="javascript:void(0)" style={{ margin: '0 10px' }} onClick={p.updateBuySite.bind(p, r.buySite)}>修改</a>
		        </div>
      		);
      	}
      },
    ];

    const paginationProps = {
      total: itemBuySiteTotal,
      current: currentPage,
      pageSize: currentPageSize,
      showSizeChanger: true,
      onChange(pageIndex) {
        p.handleSubmit(null, pageIndex);
      },
      pageSizeOptions: ['20', '50', '100', '200', '500'],
      onShowSizeChange(current, size) {
        p.handleSubmit(null, 1, size);
      },
    };

    return (
      <div>
        <div className="refresh-btn"><Button type="ghost" size="small" onClick={this._refreshData.bind(this)}>刷新</Button></div>
        <Form onSubmit={this.handleSubmit.bind(this)}>
          <Row gutter={20} style={{ width: 800 }}>
            <Col span="10">
              <FormItem
                label="采购站点名称"
                {...formItemLayout}
                labelCol={{ span: 8 }}
              >
                {getFieldDecorator('buySite', {})(
                <Input placeholder="请输入站点名称" />)}
              </FormItem>
            </Col>
          </Row>
          <Row style={{ marginLeft: 13 }}>
            <Col className="listBtnGroup">
              <Button htmlType="submit" size="large" type="primary">查询</Button>
              <Button size="large" type="ghost" onClick={() => { resetFields(); }}>清空</Button>
            </Col>
          </Row>
          <Row className="operBtn">
          </Row>
        </Form>
        <Row>
          <Col>
            <Table
              columns={columnsList}
              dataSource={itemBuySiteList}
              bordered
              size="large"
              pagination={paginationProps}
            />
          </Col>
        </Row>
        <UpdateBuySiteModel
        	visible={modalVisible}
        	close={this.closeModal.bind(this)}
        	modalValues={p.state.buySiteNameTemp}
        	dispatch={dispatch}
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  const {itemBuySitePageSize, itemBuySitePage,itemBuySiteList,itemBuySiteTotal} = state.purchase;
  return {
    itemBuySiteList,
    itemBuySiteTotal,
    currentPage:itemBuySitePage,
    currentPageSize:itemBuySitePageSize,
  };
}

export default connect(mapStateToProps)(Form.create()(PurchaseBuySite));
